
<html lang='zh-CN'>
<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <style>
        .preview-suitable-app {
            overflow: visible;
            height: calc(100% - 20px);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .app-border {
            transform-origin: center;
            position: relative;
            border-radius: 30px 30px 30px 30px;
        }
        .app-border::after {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            width: 100%;
            height: 100%;
            pointer-events: none;
            border: 4px solid rgb(51, 51, 51);
            border-radius: 30px 30px 30px 30px;
        }
        iframe {
            transform-origin: left top;
            border-radius: 26px;
            overflow: hidden;
        }
        .app-border-right {
            position: absolute;
            top: 259px;
            right: -15px;
        }
        .app-border-footer {
            width: 395px;
            height: 38px;
            position: absolute;
            bottom: 8px;
            left: -1px;
            border-radius: 0 0 16px 16px;
        }
        ::-webkit-scrollbar {
            width: 0px;
            background: #f1f1f1;
        }
    </style>
</head>
<body>
    <div id="preview-suitable-content-app" class="preview-suitable-app">
        <div class="app-border" style="width: 393px;height: 852px;transform:scale(0.9002347417840375);">
            <iframe id="iframe" class="vueIframeApp" style="border:none;width: 100%;height: 100%;"></iframe>
        </div>
    </div>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const html = "<html lang=\"zh-CN\">\n <head>\n  <meta charset=\"utf-8\"/>\n  <meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"/>\n  <title>\n   智能体应用\n  </title>\n  <script src=\"https://res.gemcoder.com/js/reload.js\">\n  <\/script>\n  <script src=\"https://cdn.tailwindcss.com\">\n  <\/script>\n  <link href=\"https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css\" rel=\"stylesheet\"/>\n  <script>\n   tailwind.config = {\n  theme: {\n    extend: {\n      colors: {\n        primary: '#165DFF',\n        secondary: '#722ED1',\n        tertiary: '#4080FF',\n        lightBlue: '#E8F3FF',\n        darkText: '#1D2129',\n        mediumText: '#4E5969',\n        lightText: '#86909C'\n      },\n      fontFamily: {\n        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif']\n      }\n    }\n  }\n};\n  <\/script>\n  <style type=\"text/tailwindcss\">\n   @layer utilities {\n            .content-auto {\n                content-visibility: auto;\n            }\n            .nav-shadow {\n                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);\n            }\n            .btn-hover {\n                transition: all 0.3s ease;\n            }\n            .btn-hover:hover {\n                transform: translateY(-2px);\n            }\n            .tab-active {\n                color: #165DFF;\n                border-bottom: 2px solid #165DFF;\n            }\n        }\n  </style>\n \n        <style>\n            ::-webkit-scrollbar { width: 0px; }\n        </style>\n    </head>\n <body class=\"bg-gray-50 font-sans text-darkText\">\n  <!-- 顶部导航栏 -->\n  <header class=\"fixed top-0 left-0 right-0 bg-white nav-shadow z-50\">\n   <div class=\"container mx-auto px-4 py-3 flex items-center justify-between\">\n    <div class=\"flex items-center space-x-2\">\n     <img alt=\"用户头像\" class=\"w-9 h-9 rounded-full object-cover\" src=\"https://design.gemcoder.com/staticResource/echoAiSystemImages/395b83c03a44ea6bea81d144a5c0cf3c.png\"/>\n     <span class=\"text-sm font-medium\">\n      首页\n     </span>\n    </div>\n    <div class=\"text-lg font-semibold\">\n     智能体\n    </div>\n    <div class=\"flex items-center space-x-4\">\n     <button class=\"text-gray-600 hover:text-primary transition-colors\">\n      <i class=\"fas fa-phone-alt text-xl\">\n      </i>\n     </button>\n     <button class=\"text-gray-600 hover:text-primary transition-colors\">\n<i class=\"fas fa-plus text-lg\">\n      </i>\n     </button>\n    </div>\n   </div>\n  </header>\n  <!-- 主内容区 -->\n  <main class=\"container mx-auto pt-20 pb-32 px-4\">\n   <!-- 宣传横幅 -->\n   <section class=\"bg-gradient-to-r from-primary to-secondary rounded-2xl overflow-hidden mb-6\">\n    <div class=\"p-6 text-white text-center\">\n     <div class=\"flex items-center justify-center mb-2\">\n      <span class=\"bg-white/30 text-white text-xs px-2 py-1 rounded mr-2\">\n       NEW\n      </span>\n      <h2 class=\"text-xl font-bold\" data-yteditvalue=\"AI生视频\">\n       AI生视频\n      </h2>\n     </div>\n     <p class=\"text-lg font-semibold\">\n      重磅更新，体验升级\n     </p>\n    </div>\n   </section>\n   <!-- 功能按钮区 -->\n   <section class=\"grid grid-cols-2 md:grid-cols-5 gap-4 mb-8\">\n    <!-- 清影AI视频 -->\n    <button class=\"flex flex-col items-center p-4 bg-white rounded-xl shadow-sm btn-hover\">\n     <div class=\"w-12 h-12 rounded-full bg-lightBlue flex items-center justify-center mb-2\">\n      <i class=\"fas fa-video text-primary text-2xl\">\n      </i>\n     </div>\n     <span class=\"text-xs text-center\">\n      清影AI视频\n     </span>\n    </button>\n    <!-- AI搜索 -->\n    <button class=\"flex flex-col items-center p-4 bg-white rounded-xl shadow-sm btn-hover\">\n     <div class=\"w-12 h-12 rounded-full bg-lightBlue flex items-center justify-center mb-2\">\n      <i class=\"fas fa-search text-primary text-2xl\">\n      </i>\n     </div>\n     <span class=\"text-xs text-center\">\n      AI搜索\n     </span>\n    </button>\n    <!-- 视频通话 -->\n    <button class=\"flex flex-col items-center p-4 bg-white rounded-xl shadow-sm btn-hover\">\n     <div class=\"w-12 h-12 rounded-full bg-lightBlue flex items-center justify-center mb-2\">\n      <i class=\"fas fa-video-slash text-primary text-2xl\">\n      </i>\n     </div>\n     <span class=\"text-xs text-center\">\n      视频通话\n     </span>\n    </button>\n    <!-- 更多智能体 -->\n    <button class=\"flex flex-col items-center p-4 bg-white rounded-xl shadow-sm btn-hover\">\n     <div class=\"w-12 h-12 rounded-full bg-lightBlue flex items-center justify-center mb-2\">\n      <i class=\"fas fa-ellipsis-h text-primary text-2xl\">\n      </i>\n     </div>\n     <span class=\"text-xs text-center\">\n      更多智能体\n     </span>\n    </button>\n   </section>\n   <!-- 对话生成区 -->\n   <section class=\"bg-white rounded-xl p-5 shadow-sm mb-6\">\n    <div class=\"py-12 text-center\">\n     <i class=\"fas fa-comment-dots text-4xl text-gray-300 mb-3\">\n     </i>\n     <p class=\"text-lightText\">\n      尚未开始对话\n     </p>\n    </div>\n   </section>\n   <!-- 历史对话区 -->\n   <section class=\"space-y-4\">\n    <!-- 用户提问 -->\n    <div class=\"flex items-start justify-end\">\n    </div>\n    <!-- AI回答 -->\n    <div class=\"flex items-start\">\n    </div>\n   </section>\n  </main>\n  <!-- 底部功能区 -->\n  <footer class=\"fixed bottom-0 left-0 right-0 bg-white nav-shadow z-40\">\n   <!-- 底部功能按钮 -->\n   <div class=\"grid grid-cols-4 py-3 border-b border-gray-100\">\n    <button class=\"flex flex-col items-center text-primary\">\n     <i class=\"fas fa-pen text-xl mb-1\">\n     </i>\n     <span class=\"text-xs\">\n      写作\n     </span>\n    </button>\n    <button class=\"flex flex-col items-center text-lightText\">\n     <i class=\"fas fa-camera text-xl mb-1\">\n     </i>\n     <span class=\"text-xs\">\n      识图\n     </span>\n    </button>\n    <button class=\"flex flex-col items-center text-lightText\">\n     <i class=\"fas fa-image text-xl mb-1\">\n     </i>\n     <span class=\"text-xs\">\n      图片创作\n     </span>\n    </button>\n    <button class=\"flex flex-col items-center text-lightText\">\n     <i class=\"fas fa-film text-xl mb-1\">\n     </i>\n     <span class=\"text-xs\">\n      生视频\n     </span>\n    </button>\n   </div>\n   <!-- 输入区域 -->\n   <div class=\"p-3\">\n    <!-- 选项卡 -->\n    <div class=\"flex justify-center mb-2 text-xs\">\n     <button class=\"px-4 py-1 tab-active font-medium\">\n      推理\n     </button>\n     <button class=\"px-4 py-1 text-lightText hover:text-primary transition-colors\">\n      沉思\n     </button>\n     <button class=\"px-4 py-1 text-lightText hover:text-primary transition-colors\">\n      联网\n     </button>\n    </div>\n    <!-- 输入框 -->\n    <div class=\"relative\">\n     <input class=\"w-full py-3 px-4 pr-12 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary\" placeholder=\"有什么我能为你做的吗\" type=\"text\"/>\n     <button class=\"absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center\">\n      <i class=\"fas fa-paper-plane\">\n      </i>\n     </button>\n    </div>\n    <!-- 底部说明 -->\n    <p class=\"text-center text-xs text-lightText mt-3\">\n     以上内容均由AI生成，仅供参考和借鉴\n    </p>\n   </div>\n  </footer>\n  <script>\n   // 页面加载时初始化\ndocument.addEventListener('DOMContentLoaded', function () {\n  // 选项卡切换功能\n  var tabs = document.querySelectorAll('.tab-active').parentNode.querySelectorAll('button');\n  tabs.forEach(function (tab) {\n    tab.addEventListener('click', function () {\n      // 移除所有选项卡的active状态\n      tabs.forEach(function (t) {\n        t.classList.remove('tab-active');\n        t.classList.add('text-lightText');\n      });\n\n      // 为当前点击的选项卡添加active状态\n      tab.classList.add('tab-active');\n      tab.classList.remove('text-lightText');\n    });\n  });\n\n  // 底部功能按钮切换\n  var functionButtons = document.querySelectorAll('footer .grid button');\n  functionButtons.forEach(function (btn) {\n    btn.addEventListener('click', function () {\n      // 移除所有按钮的active状态\n      functionButtons.forEach(function (b) {\n        b.classList.remove('text-primary');\n        b.classList.add('text-lightText');\n      });\n\n      // 为当前点击的按钮添加active状态\n      btn.classList.add('text-primary');\n      btn.classList.remove('text-lightText');\n    });\n  });\n\n  // 模拟对话发送功能\n  var inputField = document.querySelector('footer input');\n  var sendButton = document.querySelector('footer button.absolute');\n  sendButton.addEventListener('click', sendMessage);\n  inputField.addEventListener('keypress', function (e) {\n    if (e.key === 'Enter') {\n      sendMessage();\n    }\n  });\n  function sendMessage() {\n    var message = inputField.value.trim();\n    if (message) {\n      // 这里可以添加发送消息的逻辑\n      console.log('发送消息:', message);\n      inputField.value = '';\n\n      // 模拟加载状态\n      sendButton.innerHTML = \"<i class=\\\"fas fa-spinner fa-spin\\\" data-ytId=\\\"id-erqs3\\\" data-ytId=\\\"id-ic0k3\\\" data-ytId=\\\"id-lk6ke\\\" data-ytId=\\\"id-ny25v\\\"></i>\";\n\n      // 2秒后恢复原状\n      setTimeout(function () {\n        sendButton.innerHTML = \"<i class=\\\"fas fa-paper-plane\\\" data-ytId=\\\"id-2npc9\\\" data-ytId=\\\"id-mw4tx\\\" data-ytId=\\\"id-to0vo\\\" data-ytId=\\\"id-zlin1\\\"></i>\";\n      }, 2000);\n    }\n  }\n});\n  <\/script>\n </body>\n</html>\n";
        iframe.srcdoc = html;
    });
</script>
</html>
